<template>
	<view class="register">
		<u-notify ref="uNotify" message=""></u-notify>
		<u-modal :show="modalvariate.modalshow" :title="modalvariate.modaltitle" @confirm="modalConfirm">
			<view class="slot-content">
				<rich-text :nodes="modalvariate.modalcontent"></rich-text>
			</view>
		</u-modal>
		<view class="content">
			<!-- 主体 -->
			<view class="main">
				<u-form ref="uForm" :model="formModel" :rules="formRules" errorType="border-bottom">
					<u-form-item prop="formInfo.oldPassword" borderBottom labelWidth="170rpx" label="旧密码" ref="item1">
						<wInput v-model="formModel.formInfo.oldPassword" type="password" placeholder="旧密码" :focus="true"
							isShowPass>
						</wInput>
					</u-form-item>
					<u-form-item prop="formInfo.newPassword" borderBottom labelWidth="170rpx" label="新密码" ref="item2">
						<wInput v-model="formModel.formInfo.newPassword" type="password" placeholder="新密码" isShowPass>
						</wInput>
					</u-form-item>
					<u-form-item prop="formInfo.newPassword2" borderBottom labelWidth="170rpx" label="确认新密码"
						ref="item1">
						<wInput v-model="formModel.formInfo.newPassword2" type="password" placeholder="确认新密码"
							isShowPass>
						</wInput>
					</u-form-item>
				</u-form>
			</view>

			<wButton class="wbutton" text="提交修改" @click="clickSubmit"></wButton>
		</view>
	</view>
</template>

<script>
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	import {
		updateOrdinaryPwdApi
	} from '@/api/users.js'
	import {
		authorityControl
	} from '@/common/Token.js'
	export default {
		name: 'ChangePassword',
		components: {
			wInput,
			wButton,
		},
		data() {
			//u-modal 弹出层使用的变量
			const modalvariate = {
				modalshow: false,
				modaltitle: '',
				modalcontent: ''
			}
			//表单
			const formModel = {
				formInfo: {
					oldPassword: "",
					newPassword: "",
					newPassword2: ""
				}
			}
			//验证
			const formRules = {
				'formInfo.oldPassword': {
					type: 'string',
					required: true,
					min: 6,
					max: 16,
					message: '请填写密码6-16位长度',
					trigger: ['blur', 'change']
				},
				'formInfo.newPassword': {
					type: 'string',
					required: true,
					min: 6,
					max: 16,
					message: '请填写密码6-16位长度',
					trigger: ['blur', 'change']
				},
				'formInfo.newPassword2': {
					validator: (rule, value, callback) => {
						if (value !== this.formModel.formInfo.newPassword) {
							return false
						} else {
							return true
						}
					},
					message: '两次密码必须输入一致'
				}
			}
			return {
				modalvariate,
				formModel,
				formRules
			}
		},
		methods: {
			//提交事件
			clickSubmit() {
				this.$refs.uForm.setRules(this.formRules)
				this.$refs.uForm.validate().then(res => {
					updateOrdinaryPwdApi(this.formModel.formInfo).then(res => {
						if (res.code === 1) {
							this.modalvariate.modaltitle = '修改成功'
							this.modalvariate.modalcontent = '修改成功点击确定返回登录页面'
							this.modalvariate.modalshow = true
						} else {
							this.$refs.uNotify.show({
								top: 10,
								type: 'error',
								message: res.msg,
								safeAreaInsetTop: false
							})
						}
					})
				}).catch(errors => {
					uni.$u.toast(errors[0].message)
				})
			},
			//修改弹出框确定事件
			modalConfirm() {
				this.$store.dispatch('asyncRemoveToken')
				uni.$u.route({
					url: 'pages/mycenter/mycenter',
					type: "switchTab"
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.formRules)
		},
		onLoad() {
			//判断用户是否登录
			authorityControl()
		}

	}
</script>

<style>
	@import url("@/common/css/icon.css");
	@import url("@/common/css/main.css");
</style>